<template>
	<view class="">
		<u-navbar :title="title" :autoBack="true" bgColor="#fff" :fixed="false"></u-navbar>
		<view class="p-30"
			:style="'background: url(' + imgData.settleHeader + ') no-repeat;background-size: contain;height:' + systemInfo.screenHeight + 'px;'">
			<u-scroll-list :indicator="false">
				<view class="tag" style="flex-direction: row;">
					<view class="tag-item" @click.stop="tagClick(item)" :class="{'active':tag_id == item.id}"
						v-for="(item,index) in tagData">
						{{item.name}}
					</view>
				</view>
			</u-scroll-list>
			<view class="box mt-30">
				<template v-if="!noData">
					<view :class="{'mt-30':index != 0}" v-for="(item,index) in list">
						<staff-img :item="item"></staff-img>
					</view>
					<u-loadmore :status="status" />
				</template>
				<template v-else>
					<u-empty mode="data">
					</u-empty>
				</template>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		staffList
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				tag_id: 0,
				check_state: 0,
				is_share: 0,
				title: "",
				status: 'loading',
				list: [],
				noData: false,
				page: 1,
				total: 0
			}
		},
		watch: {
			city(v1, v2) {
				this.init()
			}
		},
		computed: {
			...mapState(["tagData"]),
		},
		onLoad(e) {
			if (e.title) this.title = e.title
			if (e.check_state) this.check_state = e.check_state
			if (e.is_share) this.is_share = 1

			this.init()
		},
		methods: {
			tagClick(item) {
				this.tag_id = item.id
				this.init();
			},
			init() {
				this.status = "loading";
				this.list = [];
				this.page = 1;
				this.noData = false;
				this.getList();
			},
			getList() {
				let vm = this;
				let params = {
					'page': this.page,
					'limit': this.$u.config.limit,
					'tag_id': this.tag_id,
					'check_state': this.check_state,
					'is_share': this.is_share,
					'city': this.city
				};
				staffList({
					params
				}).then(res => {
					console.log(res.length);
					if (res.rows.length != 0) {
						this.noData = false;
						this.list = this.list.concat(res.rows);
						this.total = res.total;
						this.page++;
						this.status = "loadmore"
					} else {
						this.noData = true;
						this.status = "nomore"
					}
				}).catch(err => {
					vm.$refs.uToast.show({
						type: 'error',
						message: err.message,
						complete() {
							vm.loading = false;
						}
					})
				})
			},
			//上拉
			onPullDownRefresh() {
				this.status = "loading"
				this.init();
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 500);
			},
			//下拉
			onReachBottom() {
				let vm = this;
				this.status = 'loading';
				//延时为了看效果
				setTimeout(() => {
					if (vm.page > Math.ceil(vm.total / this.$u.config.limit)) {
						this.status = 'nomore';
					} else {
						vm.getList();
					}
				}, 200)
			}
		}

	}
</script>

<style lang="scss">
	.tag {
		@include flex(column);

		&-item {
			border: 1rpx solid #E6E6E6;
			padding: 10rpx 20rpx;
			margin-left: 10rpx;
			color: #575859;
			background-color: #fff;
			border-radius: 30rpx;
			font-size: 24rpx;
			width: 120rpx;
			text-align: center;
		}

		&-item:first-child {
			margin: 0;
		}
	}

	.active {
		color: #A11A0E;
		border-color: #A11A0E;
		background-color: transparent;
	}
</style>